<template>
    <Header></Header>
    <Drawer></Drawer>
    <el-breadcrumb separator="/" style="font-size: 20px;color: #FF5C82;">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/Home' }">{{ labName }}</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/GravidaList/'+ groupId }">档案管理</el-breadcrumb-item>
      <el-breadcrumb-item>BMI分析</el-breadcrumb-item>
    </el-breadcrumb>
  
    <div class = 'pageListBotton'>
      <el-button :icon="Expand" style="color: white;background: #ff5722" round @click="pageList">
        档案列表
      </el-button>
      <span class="onBtnRight"  @click="onHome"><img src="../assets/img/pageList_qiehuan.png" alt=""> 更换群体</span>
    </div>
  
    <GravidaLeft></GravidaLeft>
  
    <el-card class="right-box-card">
        <div class="zhi">您的BMI值为</div>
        <div class="zhis">
          <span>{{bmi}}</span>
          <span>{{bmi_c}}</span>
        </div>
        <div class="fen">
          <div class="fens">
  <!--           <img src="../assets/img/Evaluation_Result_biao.svg" alt="" :style="{'margin-left':'93%','margin-top':'-100%'}">-->
          </div>
          <div class="fenss">
            <div class="one"></div>
            <div class="one">18.5</div>
            <div class="one">24.0</div>
            <div class="one">28.0</div>
          </div>
          <div class="fensss">
            <div class="one"><div class="lei" :style="{'background':'#5394D0'}">偏瘦</div></div>
            <div class="one"><div class="lei" :style="{'background':'#67C23A'}">正常</div></div>
            <div class="one"><div class="lei" :style="{'background':'#E2CB50'}">偏胖</div></div>
            <div class="one"><div class="lei" :style="{'background':'#E27350'}">肥胖</div></div>
          </div>
        </div>
    </el-card>
  
  
  
  </template>
  
  <script setup>
  import { Edit, CirclePlus, Search, Expand,  } from '@element-plus/icons-vue'
  import {defineComponent, onMounted, ref, watch, reactive} from 'vue'
  import Header from './common/Header.vue';
  import GravidaLeft from './common/ChronicLeft.vue';
  import {useRoute, useRouter} from "vue-router"
  import http from "../utils/http";
  import Drawer from './common/Drawer.vue';
  import {ElMessage} from "element-plus";
  const route = useRoute()
  const router = useRouter()
  const labName = ref()
  const groupId = ref()
  const id = ref()
  const bmi = ref()
  const bmi_c = ref()
  
  
  const pageList = async () => {
    await router.push({'path': '/GravidaList/' + groupId.value})
  }
  
  
  const onHome = async () => {
    await router.push({'path': '/Home'})
  }
  
  const fetchData = async () => {
    if(route.params.groupId) {
      groupId.value = route.params.groupId
      id.value = route.params.id
      if(groupId.value == 3) {
        labName.value = '婴幼儿营养测评'
      } else if(groupId.value == 5) {
        labName.value = '孕产妇营养测评'
      } else if(groupId.value == 6) {
        labName.value = '成年人营养测评'
      } else if(groupId.value == 7) {
        labName.value = '慢性病营养测评'
      } else if (groupId.value == 8) {
        labName.value = '团体营养测评'
      } else {
        labName.value = '婴幼儿营养测评'
      }
  
      http.get('api/Chronic/getbmi?id='+ id.value).then((res)=>{
        window.localStorage.setItem("reportId", res.data.data.reportId);
        bmi.value = res.data.data.bmi
        if(bmi.value<18.5){
          bmi_c.value = '偏瘦'
        }else if(bmi.value<24&&bmi.value>=18.5){
          bmi_c.value = '正常'
        }else if(bmi.value<28&&bmi.value>=24){
          bmi_c.value = '偏胖'
        }else if(bmi.value>=28){
          bmi_c.value = '肥胖'
        }
      })
    } else {
      ElMessage.error('栏目编号不得为空')
      await router.push({'path': '/Home'})
    }
  }
  
  onMounted(() => {
    fetchData()
  })
  </script>
  
  <style scoped>
  @import '../assets/css/common.css';
  .BMIprimary {
    width: 268px;
    height: 70px;
    background: #ff5722;
    opacity: 1;
    border-radius: 8px;
    font-size: 24px;
  }
  .BMIDefault {
    width: 268px;
    height: 70px;
    background: #fff;
    opacity: 1;
    color: #ff5722;
    border-radius: 8px;
    font-size: 24px;
    border:1px solid #ff5722;
  }
  
  
  ::v-deep .el-button:focus, .el-button:hover {
    background: #ff5722;
    color: #fff;
  }
  ::v-deep  .el-progress-bar__inner {
    background: #ff5722;
  }
  </style>
  <style>
  .right-box-card {
    margin-left: 2%;
    margin-top: 1%;
    position: static;
    top: calc(260px);
    width: 60%;
    float: left;
    min-height: 650px;
  }
  .right-box-card .zhi {
    width: 100%;
    height: 25px;
    line-height: 25px;
    font-weight: 900;
    font-size: 18px;
    text-align: center;
    color: #606266;
    margin-top: 15%;
  }
  
  .right-box-card .zhis {
    width: 100%;
    height: 67px;
    line-height: 67px;
    font-weight: 900;
    font-size: 48px;
    text-align: center;
    color: #E2CB50;
  }
  
  .right-box-card .zhis span:nth-child(1) {
    margin-right: 24px;
    color: #303133;
  }
  
  .right-box-card .fen {
    width: 100%;
    height: 30px;
    padding: 0 270px;
    box-sizing: border-box;
    margin-top: 99px;
  }
  
  .right-box-card  .fen  .fens {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #5394D0 12.5%, #67C23A 37.5%, #E2CB50 62.5%, #E27350 87.5%);
    border-radius: 25px;
    position: relative;
  }
  .right-box-card  .fen  .fens .img{
    margin-top: -100%;
  }
  .right-box-card .fen .fenss {
    width: 100%;
    height: 100%;
    position: relative;
    top: -30px;
    padding: 2px 0;
    box-sizing: border-box;
    display: flex;
    line-height: 26px;
  }
  
  .right-box-card .fen .fenss .one{
    flex: 1;
    border-right: 2px solid rgba(255, 255, 255, 0.5);
    padding-left: 6px;
    box-sizing: border-box;
    font-size: 16px;
    color: #ffffff;
  }
  
  .right-box-card .fen .fenss .one:last-child {
    border: none;
  }
  
  .right-box-card .fen .fensss {
    width: 100%;
    height: 37px;
    position: relative;
    top: -20px;
    display: flex;
  }
  
  .right-box-card .fen .fensss .one {
    flex: 1;
  }
  
  .right-box-card .fen .fensss .one .lei {
    width: 68px;
    height: 37px;
    margin: 0 auto;
    text-align: center;
    line-height: 37px;
    border-radius: 40px;
    font-size: 18px;
    color: #ffffff;
  }
  </style>
  